<!-- orderdetail 页面内容 -->
<section class="orderdetail col-xs-12 padding-reset" ng-controller="orderdetailCtrl">
    <!-- <input type="file" name="images" style='display: none;' id='speedimg' multiple="multiple">
    <input type="file" name="images" style='display: none;' id='speedimg1' multiple="multiple"> -->
    <input type="file" name="images" style='display: none;' id='speedimg0'>
    <input type="file" name="images" style='display: none;' id='speedimg1'>
    <input type="file" name="images" style='display: none;' id='speedimg2'>
    <input type="file" name="images" style='display: none;' id='speedimg3'>
    <input type="file" name="images" style='display: none;' id='speedimg4'>
    <input type="file" name="images" style='display: none;' id='speedimg5'>
    <input type="file" name="images" style='display: none;' id='speedimg10'>
    <input type="file" name="images" style='display: none;' id='speedimg11'>
    <input type="file" name="images" style='display: none;' id='speedimg12'>
    <input type="file" name="images" style='display: none;' id='speedimg13'>
    <input type="file" name="images" style='display: none;' id='speedimg14'>
    <input type="file" name="images" style='display: none;' id='speedimg15'>
    <input type="file" name="images" style='display: none;' id='speedimg16'>
    <input type="file" name="images" style='display: none;' id='speedimg17'>
    <input type="file" name="images" style='display: none;' id='speedimg18'>
    <ol class="breadcrumb">
        <li ng-click="goBack();"><a>我的订单</a></li>
        <li><a>订单详情</a></li>
    </ol>
    <nav class="navbar navbar-default nav-state-bar yf-shadow" ng-if='order.workflow_state != "canceled"'>
        <p class="navbar-text">订单状态</p>
        <ul class="nav navbar-nav">
            <li ng-repeat="arr in statesArrs track by $index" ng-class="{'done': arrindex >= $index }">
                <a>
                    <div class="circle"></div>
                    {{ arr.name }}
                </a>
            </li>
        </ul>
    </nav>
    <div class="panel panel-default yf-shadow">
        <div class="panel-body">
            <div class="row">
                <div class="col col-md-7 col-sm-7 col-xs-7 order-detail" ng-class="{ 'width': order.workflow_state == 'canceled' }">
                    <div class="row order-detail-info">
                        <order-label state='order.mount_order'></order-label>
                        <div class="line">订单号: {{ order.serial_number }}</div>
                        <div class="line" ng-if='!order.mount_order'>预约测量时间: {{ order.booking_date * 1000 | date: 'yyyy-MM-dd HH:mm '}}</div>
                        <div class="line" ng-if='order.mount_order'>预约安装时间: {{ order.install_date * 1000 | date: 'yyyy-MM-dd HH:mm '}}</div>
                        <div class="line">姓名: {{ order.name }}</div>
                        <div class="line">预估面积: {{order.square}}(㎡) | 品牌: {{order.company_name}}</div>
                        <div class="line address">
                            地址:
                            <a ng-class="{'dis': user_role != 2}" ng-click="goMap(user_role, order.id);">
                                <span class="glyphicon glyphicon-map-marker"></span> {{ order.address }}
                            </a>
                        </div>
                    </div>
                    <div class="row order-detail-state">
                        <div class="line">安装总价: <span class="money" ng-if='order.total'>{{ order.total | moneyint }}元</span></div>
                        <div class="line">订单状态: {{ order.workflow_state | state }}</div>
                        <div class="line">服务商: <span ng-bind="order.service_info.name ? order.service_info.name: '暂无服务商抢单'"></span>
                          <div class="pull-right" style="padding-right: 30px;" ng-if="['completed', 'canceled'].indexOf(order.workflow_state) == -1">
                            <a type='button' class="c1" ng-click="changeOrder(order, $index);" ng-if='user_role == 2 && ["measured"].indexOf(order.workflow_state) != -1 && user.id != order.customer_id'>修改</a>
                          </div>
                          <div class="pull-right">
                            <input type="file" name="images" id='xml-file'>
                            <a ng-click="uploadFile();">上传生产信息</a>
                            <a ui-sref="mine.productinfo({ id: order.id})">查看生产信息</a>
                          </div>
                        </div>
                    </div>
                </div>
                <!-- 个人界面 / 品牌商界面-->
                <div class="col col-md-5 col-sm-5 col-xs-5 order-process" ng-if="order.workflow_state != 'canceled'">
                    <!-- 新订单 -->
                    <h4 class="contact" ng-if='user_role == 2 && user.id != order.customer_id'>联系方式: <span class='tel'>{{ order.tel }}</span></h4>
                    <div ng-show="order.workflow_state == 'new'">
                        <h4 class="line-title">最新进程</h4>
                        <div class="line time">
                            {{ order.updated_at * 1000 | date: 'yyyy-MM-dd HH:mm'}}
                        </div>
                        <div class="line">
                            您生成了一个新订单
                        </div>
                        <div class="line line-end" style="margin-top: 150px;">
                            您可以
                            <a class='c1' data-toggle="modal" data-target=".bs-example-modal-sm" ng-if='user.id == order.customer_id'>编辑</a>
                            <a class='c1' ng-click="deleteOrder(order.id);">取消订单</a>
                        </div>
                    </div>
                    <!-- 预约测量 -->
                    <div ng-show="order.workflow_state == 'appointed_measurement'">
                        <h4 class="line-title">最新进程</h4>
                        <!-- <div ng-if="user.id == order.customer_id"> -->
                        <div ng-if="user_role != 2">
                            <div class="line"><img class="img-circle" ng-src="{{ order.service_info.image }}?imageView2/1/w/200/h/200/interlace/1" data-action="zoom" alt="" /></div>
                            <div class="line time">{{ order.updated_at * 1000 | date: 'yyyy-MM-dd HH:mm'}}</div>
                            <div class="line">
                              <span class="name" ui-sref="merchant({ id: order.facilitator_id })">{{ order.service_info.name }}</span>抢到了您的订单
                            </div>
                        </div>
                        <!-- <div ng-if="user_role == 2 && user.id != order.customer_id"> -->
                    </div>
                    <!-- 已测量 -->
                    <div ng-show="order.workflow_state == 'measured'">
                        <h4 class="line-title">最新进程</h4>
                        <div class="line time">{{ order.updated_at * 1000 | date: 'yyyy-MM-dd HH:mm'}}</div>
                        <div class="line"><span class="name" ui-sref='merchant({ id: order.facilitator_id })'>{{ order.service_info.name }}</span>上传了{{ order.measure_pictures[0].length }}张测量文件</div>
                        <div class="line">等待审核</div>
                        <div class="line time">{{order.measure_pictures[0][0].updated_at * 1000 | date: 'yyyy-MM-dd HH:mm'}}  上传的测量图片</div>
                        <div class="line">
                            <ul class='previewpicturelist'>
                                <li ng-repeat='(kp, pic) in order.measure_pictures[0] track by kp' ng-click="downloadPdf(pic.image.url);">
                                    <img ng-src="{{ pic.image.url | to_url }}" data-action="zoom">
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div ng-if="user_role == 2 && ['appointed_measurement', 'measured'].indexOf(order.workflow_state) != -1">
                        <div class="line" ng-if='order.measure_pictures.length == 0'>已上门测量，上传文件</div>
                        <div class="line" ng-if="order.measure_pictures.length > 0">如图纸有误，可再次上传</div>
                        <div class="line time"> 测量文件最多可上传6张, 小于5 M </div>
                        <div class="line">
                            <ul id="previewul">
                            </ul>
                        </div>
                        <div class="line">
                            <!-- <button type='button' onclick='document.getElementById("speedimg").click()' class="btn btn-default btn-upload">
                                    <span class="glyphicon glyphicon-arrow-up"></span> 上传
                                </button> -->
                            <button type='button' class="btn btn-default btn-completed" ng-click="completed('image', 'measure_pictures', 'speedimg');">
                                <span class="glyphicon glyphicon-ok"></span> 完成
                            </button>
                        </div>
                        <div class="line">
                            您可以
                            <a class='c1' data-toggle="modal" data-target=".bs-example-modal-sm" ng-if='user_role != 2'>编辑</a>
                            <a class='c1' ng-click="deleteOrder(order.id);">取消订单</a>
                        </div>
                    </div>
                    <!-- 预约安装 -->
                    <div ng-show="order.workflow_state == 'appointed_installation'">
                        <h4 class="line-title">最新进程</h4>
                        <div class="line">
                            品牌商审核通过，等待安装
                        </div>
                        <!-- <div ng-if="user_role != 2">
                                <div class="line time">{{ order.install_date * 1000 | date: 'yyyy-MM-dd HH:mm'}}</div>
                                <div class="line">
                                    等待服务商安装

                                <div class="line"><span class="name">{{ order.service_info.name }}</span>上传了{{ order.pictures.length }}张测量文件</div>
                                <div class="line">审核通过</div>
                                <div class="line">
                                    <ul class='previewpicturelist'>
                                        <li ng-repeat='(kp, pic) in order.pictures track by kp'>
                                            <img ng-src="{{ pic.image.url }}">
                                        </li>
                                    </ul>
                                </div>
                            </div> -->
                        <div ng-if="(user_role != 1 && user.id == order.facilitator_id) || user.id == order.customer_id">
                            <div ng-if='user.id == order.customer_id'>
                                <!-- <div class="line time">
                                        预约安装时间
                                    </div>
                                    <div class="line installedtime">
                                        <input class="flatpickr form-control" id='flatpickrc' set-time time='order.install_date' type="text" placeholder="请选择预约安装时间">
                                    </div> -->
                                <div class="line">
                                    <input type="text" class='form-control' ng-value="order.service_info.name" data-toggle="modal" data-target=".servermodal" name="">
                                </div>
                                <div class="line">
                                    <a ng-click="updateTimeAndMaster(false, order, user.id == order.customer_id);" class="btn btn-default btn-upload">
                                            确定
                                        </a>
                                </div>
                            </div>
                            <!-- <div ng-show="(user_role == 2 && !setisinstalltime && user.id != order.customer_id) || (changeInstallTime && user.id == order.customer_id)"> -->
                            <div ng-show="(user_role == 2 && !setisinstalltime) || (changeInstallTime)">
                                <div class="line time">
                                    预约安装时间
                                </div>
                                <div class="line installedtime">
                                    <input class="flatpickr form-control" id='flatpickrc' set-time time='order.install_date' type="text" placeholder="请选择预约安装时间">
                                </div>
                                <!-- <div class="line" ng-if='user.id == order.customer_id'> -->
                                <div class="line" ng-if='user_role != 2'>
                                    <a ng-click="installTime();" class="btn btn-default btn-upload">
                                            确定
                                        </a>
                                </div>
                                <!-- <div ng-show="user_role == 2 && user.id != order.customer_id"> -->
                                <div ng-show="user_role == 2 || user.id == order.customer_id">
                                    <!-- <div class="line time">安装师傅:</div>
                                        <div class="line">
                                            <input type="text" class='form-control' ng-value="order.service_info.name"  data-toggle="modal" data-target=".servermodal" name="">
                                        </div> -->
                                    <!-- <div class="line" ng-if='user_role == 2'>
                                            <a class='btn yf-btn' data-toggle="modal" data-target=".servermodal">选择安装师傅</a>
                                        </div> -->
                                    <div class="line" ng-if='!setisinstalltime'>
                                        <a ng-click="updateTimeAndMaster(false, order);" class="btn btn-default btn-upload">
                                                确定
                                            </a>
                                    </div>
                                </div>
                            </div>
                            <div ng-show="setisinstalltime">
                                <div ng-show="!changeInstallTime">
                                    <div class="line time">
                                        预约安装时间
                                    </div>
                                    <div class="line c1">
                                        {{ order.install_date * 1000 | date: 'yyyy/MM/dd HH:mm' }}
                                    </div>
                                    <div class="line" ng-if="user_role == 0 && order.completed_pictures.length <= 0">
                                        <a ng-click="changeTime();" class="btn btn-default btn-upload">
                                                修改安装时间
                                            </a>
                                    </div>
                                </div>
                                <!-- <div ng-if='order.completed_pictures.length <= 0 && user_role == 2 && order.install_date && user.id != order.customer_id'> -->
                                <div ng-if='order.completed_pictures.length <= 0 && user_role == 2 && order.install_date'>
                                    <div class="line">
                                        上传安装效果图:
                                    </div>
                                    <div class="line">
                                        <ul id="previewul1">
                                        </ul>
                                    </div>
                                    <div class="line">
                                        <!-- <button type='button' onclick='document.getElementById("speedimg1").click()' class="btn btn-default btn-upload">
                                                <span class="glyphicon glyphicon-arrow-up"></span> 上传
                                            </button> -->
                                        <button type='button' class="btn btn-default btn-completed" ng-click="completed('image_type', 'completed_pictures', 'speedimg1');">
                                            <span class="glyphicon glyphicon-ok"></span> 完成
                                        </button>
                                    </div>
                                </div>
                                <!-- <div ng-if='order.completed_pictures.length > 0 && user.id != order.customer_id && user_role == 2'> -->
                                <div ng-if='order.completed_pictures.length > 0 && user_role == 2'>
                                    <div class="line time">安装效果图</div>
                                    <div class="line">
                                        <ul class='previewpicturelist'>
                                            <li ng-repeat='(kp, pic) in order.completed_pictures track by kp' ng-click="downloadPdf(pic.image.url);">
                                                <img ng-src="{{ pic.image.url | to_url }}" data-action="zoom">
                                            </li>
                                        </ul>
                                        <a ng-click="installed();" ng-if="user_role == 2" class="btn btn-default btn-upload">确认安装</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 已安装 -->
                    <div ng-show="(order.workflow_state == 'installed' || order.workflow_state == 'confirm_installed') && ((user.id != order.customer_service_id && user.id == order.facilitator_id) || (user.id == order.customer_service_id && user.id != order.facilitator_id) || user.id == order.customer_id)">
                        <h4 class="line-title">最新进程</h4>
                        <div class="line"><img class="img-circle" ng-src="{{ order.service_info.image }}" data-action="zoom" alt=""></div>
                        <div class="line time">{{ order.updated_at * 1000 | date: 'yyyy-MM-dd HH:mm'}}</div>
                        <div ng-if="user_role != 2 || user.id == order.customer_id">
                            <!-- <div ng-if="user.id == order.customer_id"> -->
                            <div class="line"><span class="name" ui-sref='merchant({ id: order.facilitator_id })'>{{ order.service_info.name }}</span>已安装完成</div>
                            <!-- <div class="line">本单您需要支付<span style="color: red;">￥{{ order.total | moneyint }}</span></div> -->
                            <div class="line" ng-if="!order.is_company">
                                <a class='btn btn-default yf-btn' data-toggle="modal" data-target="#payModal">确认支付</a>
                                <!-- <button class='btn btn-default yf-btn' ng-click="payOrder(order);">直接支付</button> -->
                            </div>
                            <div class="line" ng-if="order.is_company && order.customer_id == user.id && order.workflow_state != 'confirm_installed'">
                                <a class='btn btn-default yf-btn' ng-click="installed();">确认安装</a>
                                <!-- <button class='btn btn-default yf-btn' ng-click="payOrder(order);">直接支付</button> -->
                            </div>
                        </div>
                        <div ng-if='user_role == 2 && (user.id != order.customer_id || (user.id == order.customer_service_id && user.id != order.facilitator_id))'>
                            <!-- <div ng-if='user.id != order.customer_id'> -->
                            <div class="line">
                                <!-- 测量师傅时显示 -->
                                <span ng-if='user.id == order.customer_service_id && user.id != order.facilitator_id' class="c1">
                                    {{order.service_info.name}}师傅
                                </span>
                                安装完成，等待付款
                            </div>
                        </div>
                    </div>
                    <!-- 已完成 -->
                    <div ng-show="order.workflow_state == 'completed'">
                        <h4 class="line-title">最新进程</h4>
                        <div class="line time">{{ order.updated_at * 1000 | date: 'yyyy-MM-dd HH:mm'}}</div>
                        <div class="line" ng-if='user.id != order.customer_id'>
                            订单已经完成
                        </div>
                        <div ng-if="user.id == order.customer_id">
                            <div class="line">您已付款成功!订单完成!</div>
                            <div class="line time">评分</div>
                            <div class="line orderdetailstar">
                                <i class="icon-xing" ng-class="{'active': (comment.raty - 1) >= $index}" ng-mouseover="setRaty($index + 1, order.state);" ng-click="setRaty($index + 1, order.state);" ng-repeat="arr in arrs track by $index"></i>
                            </div>
                            <div class="line time">评价</div>
                            <div class="line" ng-if="order.state != 'completed'">
                                <textarea class="form-control" style="text-align: left;" ng-model='comment.content' placeholder="{{comment.content}}" ng-readonly="order.state == 'completed'"></textarea>
                            </div>
                            <div class="line" ng-if="order.state == 'completed'">
                                {{ order.comment.content }}
                            </div>
                            <div class="line" style='padding-bottom: 15px;' ng-show='!order.state'>
                                <a class="btn btn-default yf-btn" ng-click="commentOrder(comment);">评论</a>
                            </div>
                        </div>
                        <div ng-if='user_role == 2 && user.id != order.customer_id'>
                            <div class="line">
                                客户已支付订单，您可以在我的钱包中查收金额！
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div journal order='order'></div>
    <div class="modal fade bs-example-modal-sm" id='myModal' tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-edit">
            <div class="modal-content">
                <form name='modalorderform1' role="form" novalidate autocomplete="false" ng-submit="putOrderDetail(modalorderform1.$invalid, order);">
                    <div class="form-group">
                        <label for="time">预约时间</label>
                        <!-- <input type="datetime-local" class="form-control" ng-model='order.booking_date' id="time" placeholder="预约时间" required> -->
                        <button type="button" class="close" data-dismiss='modal'><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <input class="changeflatpickr form-control" id='changeflatpickr' set-time time='order.booking_date' type="text" placeholder="预约时间" required>
                    </div>
                    <div class="form-group">
                        <label for="person">预约人</label>
                        <input type="text" class="form-control" ng-model='order.name' ng-pattern="/^[A-Za-z0-9\u4e00-\u9fa5]{2,20}$/" name="person" placeholder="预约人" required>
                    </div>
                    <div class="form-group error-container" ng-show="ismodalorderform1 && (modalorderform1.person.$error.pattern || modalorderform1.person.$error.required)">
                        请输入长度 2-20位的名字(中文，字母，数字组成)！
                    </div>
                    <div class="form-group">
                        <label for="tel">联系电话</label>
                        <input type="tel" class="form-control" ng-model='order.tel' ng-pattern="/^1[34578]\d{9}$/" name="tel" placeholder="联系电话" required>
                    </div>
                    <div class="form-group error-container" ng-show="ismodalorderform1 && (modalorderform1.tel.$error.pattern || modalorderform1.tel.$error.required)">
                        请输入有效手机号！
                    </div>
                    <div class="row">
                        <div class="text-center">
                            <button type="submit" class="btn btn-default btn-submit yf-btn">保存修改</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- <div class="modal fade pay-modal-sm" id='payModal' tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-edit">
            <div class="modal-content">
                <div class="modal-head">
                    订单支付
                </div>
                <form name='payorderform' role="form">
                    <div class="form-group form-group-line">
                        <div class="row margin-reset">
                            <div class="col-xs-8 padding-reset text-left">服务商：{{ order.service_info.name}}</div>
                            <div class="col-xs-4 text-right state">需支付</div>
                        </div>
                        <div class="row margin-reset">
                            <div class="col-xs-8 padding-reset text-left">预估面积{{ order.square }}(㎡)/{{ order.company_name }}</div>
                            <div class="col-xs-4 padding-reset text-right">￥<span class="money1">{{ order.total | moneyint }}</span></div>
                        </div>
                    </div>
                    <div class="form-group form-group-line">
                        <div class="row margin-reset">
                            <div class="col-xs-5 padding-reset text-left">账户余额</div>
                            <div class="col-xs-7 padding-reset text-right">￥<span class="money2">{{ user.amount | moneyint: true }}</span></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="text-center">
                            <button type="submit" class="btn btn-default btn-submit yf-btn" ng-disabled="payorderform.$invalid" ng-click="payOrder(order);">立即付款</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div> -->
    <div class="modal fade common-modal" id='payModal' tabindex="-1" role="dialog" aria-labelledby="common-modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content yf-shadow">
                <div class="modal-header text-center">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h3 class="modal-title" id="common-modal">
                          确认支付
                        </h3>
                </div>
                <div class="modal-body">
                  <form name='payorderform' role="form">
                      <div class="form-group form-group-line">
                          <div class="row margin-reset">
                              <div class="col-xs-offset-1 col-xs-7 padding-reset text-left">
                                <!-- 服务商：{{ order.service_info.name}} -->
                                测量师傅：{{order.customer_service_info.name}}
                                <br>
                                安装师傅：{{order.service_info.name}}
                              </div>
                              <div class="col-xs-3 text-right state">总计</div>
                          </div>
                          <div class="row margin-reset">
                              <!-- <div class="col-xs-offset-1 col-xs-7 padding-reset text-left">{{ order.serial_number }}/预估面积{{ order.square }}(㎡)/{{ order.company_name }}</div> -->
                              <div class="col-xs-offset-1 col-xs-7 padding-reset text-left text-muted">价格明细：测量费用￥{{order.measure_amount}}/安装费用￥{{order.total}}</div>
                              <div class="col-xs-3 padding-reset text-right"><span class="money1">￥{{ order.total | moneyint }}</span></div>
                          </div>
                      </div>
                      <div class="form-group form-group-line">
                          <div class="row margin-reset">
                              <div class="col-xs-offset-1 col-xs-6 padding-reset text-left">账户余额</div>
                              <div class="col-xs-4 padding-reset text-right"><span class="money2">￥{{ user.amount | moneyint: true }}</span></div>
                          </div>
                      </div>
                      <div class="row">
                          <div class=" col-xs-offset-1 col-xs-10 text-center">
                              <button type="submit" class="btn mt_group_btn btn-block" ng-disabled="payorderform.$invalid" ng-click="payOrder(order);">立即付款</button>
                          </div>
                      </div>
                  </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade col-xs-12 servermodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header text-left">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4>指定服务商</h4>
                </div>
                <div class="modal-body">
                    <div class="row margin-reset">
                        <form role="form">
                            <div class="input-group">
                                <input type="search" class="form-control search-input" ng-model='keyword' ng-enter="getMaster(keyword);" placeholder="输入师傅的账号或姓名">
                                <span class="input-group-btn">
                        <button class="btn btn-default search-btn" type="button" ng-click="getMaster(keyword);">搜索</button>
                      </span>
                            </div>
                        </form>
                    </div>
                    <div class="row" style="padding-left: 25px;color: red;" ng-show='noperson' ng-bind='noperson'></div>
                    <table class="table table-striped table-bordered table-condensed">
                        <tr ng-repeat="master in masters track by $index" ng-click="setMaster(master);">
                            <td>{{master.tel}}</td>
                            <td>{{master.real_name}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
